<template>
  <div class="app-container">
    <!-- <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户信息" name="first"></el-tab-pane>
        <el-tab-pane label="设备信息" name="second"></el-tab-pane>
        <el-tab-pane label="我的亲属" name="third"></el-tab-pane>
      </el-tabs>
    </el-card> -->
    <div style="margin-top: 24px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card" style="padding-bottom: 114px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">个人信息</span>
              <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;" type="text">{{ userarr.createdTime }}</span>
            </div>
            <div style="border-bottom: 1px solid #F0F0F0; padding-bottom: 10px">
              <img style="display: block; width: 100px; margin: 0 auto;" :src = touxingimg />
            </div>
            <div class="box">
              <span style="padding: 10px 13px">手机号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.uphone }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">证件号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.card }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">姓       名：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.uname }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">出生日期：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.birthData }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">年       龄：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.age }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">性       别：</span>
              <span v-if="userarr.sex == 0" style="padding: 10px 13px; margin-top: 4px">男</span>
              <span v-if="userarr.sex == 1" style="padding: 10px 13px; margin-top: 4px">女</span>
              <span v-if="userarr.sex == 2" style="padding: 10px 13px; margin-top: 4px">未知</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">身       高：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.height }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">体       重：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.weight }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">户籍属地：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.address }}</span>
            </div>
			<div class="box">
			  <span style="padding: 10px 13px">健康顾问：</span>
			  <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.healthAdvisorName }}</span>
			</div>
            <!-- <div class="box">
              <span style="padding: 10px 13px">详细地址：</span>
              <span style="padding: 10px 13px; margin-top: 4px">永安路与汇华街交口绿地华府7-7-1001</span>
            </div> -->
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">就医状况</span>
              <!-- <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;" type="text">2022-04-30 12:22:40</span> -->
            </div>
            <!-- <div style="border-bottom: 1px solid #F0F0F0; padding-bottom: 10px">
              <img style="display: block; width: 80px; margin: 0 auto;" src="../../../assets/images/sheicon1.png" />
            </div> -->
            <div class="box">
              <span style="padding: 10px 13px">最 近 就 医：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.medicalName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">就 医 原 因：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.medicalReasonsName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">最近服用药：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.recentMedication }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">服 药 频 率：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugFrequencyName }}</span>
            </div>
          </el-card>
          <el-card class="box-card" style="margin-top: 24px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">常用药物</span>
              <!-- <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;" type="text">2022-04-30 12:22:40</span> -->
            </div>
            <!-- <div style="border-bottom: 1px solid #F0F0F0; padding-bottom: 10px">
              <img style="display: block; width: 80px; margin: 0 auto;" src="../../../assets/images/sheicon1.png" />
            </div> -->
            <div class="box">
              <span style="padding: 10px 13px">药物类别：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugCategoryName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px"></span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.drugName }}</span>
            </div>
            <div class="box" v-for="(item,index) in yaopinimg" :key="index">
              <img style="width: 80px; margin-right: 30px" :src = item.fastdfsUrl />
            </div>
          </el-card>
          <el-card class="box-card" style="margin-top: 24px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">紧急联系人</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">姓       名：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relativesName }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">手机号码：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relativesPhone }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">关      系：</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ userarr.relationshipName }}</span>
            </div>
          </el-card>
        </el-col>
        <!-- <el-col :xs="24" :sm="24" :md="12" :lg="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">地址管理</span>
            </div>
            <div class="box" v-for="(item,index) in addarr" :key="index">
              <span style="padding: 10px 13px">{{ item.name }}</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ item.mobile }}</span>
              <span style="padding: 10px 13px; margin-top: 4px">{{ item.addressOneStr }}{{ item.addressTwoStr }}{{ item.addressThreeStr }}{{ item.addressFourStr }}{{ item.addressDetail }}</span>
            </div>
          </el-card>
        </el-col> -->
      </el-row>
    </div>
    <!-- <div v-if="name == 'second'" style="margin-top: 24px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card" style="padding-bottom: 88px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">当前设备信息</span>
              <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;" type="text">{{ lishiarr[0].createTime }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">名称:</span>
              <span style="padding: 10px 13px;">{{ lishiarr[0].name }}</span>
            </div>
            <div class="box">
              <span style="padding: 10px 13px">型号:</span>
              <span style="padding: 10px 13px; margin-top: 4px"> {{ lishiarr[0].equipmentModel }} </span>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-card class="box-card" style="padding-bottom: 2px">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">运动数据</span>
              <span style="float: right; padding: 3px 0; color: rgba(153, 153, 153, 1); font-size: 14px;" type="text">2022-04-30 12:22:40</span>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xinlv.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">心率：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.xinlv }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">次/分</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xueya.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">血压：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.shuzhangya }}/{{ yundongarr.shousuoya }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">mmgh</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/shuimian.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">睡眠：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.deephoue }}.{{ yundongarr.deepminute }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">小时</span></span>
              </div>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/bushu.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">步数：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.step }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">步</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/reliang.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">热量：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.kcal }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">千卡</span></span>
              </div>
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/juli.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">距离：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;"><span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">公里</span></span>
              </div>
            </div>
            <div class="box" style="height: 56px; align-items: center;">
              <div>
                <img style="width: 22px; height: 22px; margin-right: 10px" src="../../../assets/images/xueyang.png" />
                <span style="padding: 10px 0; font-size: 14px; color: rgba(0, 0, 0, 0.8)">血氧：</span>
                <span style="padding: 10px 0; margin-top: 4px; font-size: 22px;">{{ yundongarr.xueyang }}<span style="font-size: 14px; color: rgba(0, 0, 0, 0.8)">%</span></span>
              </div>
              <span style="font-size: 14px; color: #1890FF; margin-top: 10px">查看全部>></span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :xs="24" :sm="24" :md="12" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px; color: #0091FF;">历史换绑设备信息</span>
            </div>
            <el-table  :data="lishiarr">
              <el-table-column label="设备编号" align="center" prop="id" />
              <el-table-column label="型号" align="center" prop="equipmentModel" show-overflow-tooltip />
              <el-table-column label="货号" align="center" prop="equipmentArticle" />
              <el-table-column label="绑定时间" align="center" prop="createTime" show-overflow-tooltip />
              <el-table-column label="解绑时间" align="center" prop="relieveTime" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div> -->
    <!-- <div v-if="name == 'third'" style="margin-top: 24px">
      <el-row :gutter="20" style="margin-top: 24px">
        <el-col :xs="24" :sm="24" :md="12" :lg="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-size: 14px;">我的亲属</span>
            </div>
            <el-table  :data="qinshuarr">
              <el-table-column label="姓名" align="center" prop="uname" show-overflow-tooltip />
              <el-table-column label="手机号码" align="center" prop="uphone" />
              <el-table-column label="关系 " align="center" prop="relationshipName" show-overflow-tooltip />
              <el-table-column label="时间" align="center" prop="createdTime" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="250">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleqinshudet(scope.row)"
                    v-hasPermi="['system:miniuser:edit']"
                  >详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getqinshu"
            />
          </el-card>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>

<script>
import { getMiniuser, getuseraddres, userimg, useryaopinimg, getuserlishi, useryundong, userqinshu } from "@/api/system/miniuser";
// let id = 0;
export default {
  name: "Laborer",
  data() {
    return {
        activeName: 'first',
        name: '',
        id: '',
        userarr: {},
        addarr: [],
        uphone: '',
        touxingimg: '',
        yaopinimg: [],
        lishiarr: [],
        yundongarr: {},
        qinshuarr: [],
        total: '',
        queryParams: {
          pageNum: 1,
          pageSize: 10
        }
    };
  },
  created() {
    this.id = this.$route.query.id
    this.uphone = this.$route.query.uphone
    this.getdet()
    // this.getaddres()
    this.getuserimg()
    this.gettaopinimg()
    // this.getlishi()
    // this.getyundong()
    // this.getqinshu()
    // console.log(this.activeName);
    this.name = this.activeName
  },
  methods: {
    // 详情
    getdet() {
      let parse = {
        id: this.id
      }
      getMiniuser(parse).then(response => {
          this.userarr = response.data[0];
          // console.log(this.userarr)
      });
    },
    // 查询地址管理
    getaddres() {
      let parse = {
        userId: this.id
      }
      getuseraddres(parse).then(response => {
        // console.log(response)
          this.addarr = response.rows;
      });
    },
    // 获取头像
    getuserimg() {
      let parse = {
        userId: this.uphone
      }
      userimg(parse).then(response => {
        // console.log(response)
        if(response.data.fastdfsUrl){
          this.touxingimg = response.data.fastdfsUrl;
        }

      });
    },
    // 药品图片
    gettaopinimg() {
      let parse = {
        userId: this.uphone
      }
      useryaopinimg(parse).then(response => {
          this.yaopinimg = response.data;
      });
    },
    // 获取历史绑定设备信息
    getlishi() {
      let parse = {
        userId: this.id
      }
      getuserlishi(parse).then(response => {
        // console.log(response)
          this.lishiarr = response.rows;
      });
    },
    // 获取用户运动数据
    getyundong() {
      let parse = {
        deviceId: this.id
      }
      useryundong(parse).then(response => {
        // console.log(response)
        // console.log(this.userarr.height  * 0.415 / 100)
          this.yundongarr = response.data;
      });
    },
    // 获取亲属
    getqinshu() {
      let parse = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        id: this.id
      }
      userqinshu(parse).then(response => {
        // console.log(response)
        // console.log(this.userarr.height  * 0.415 / 100)
          this.qinshuarr = response.rows;
          this.total = response.total
      });
    },
    // 亲属详情
    handleqinshudet(row){
      console.log(row.id)
    },
    // tab切换
    handleClick() {
      // console.log(this.activeName);
      this.name = this.activeName
    }
  }
};
</script>
<style scoped>
  .box {
    border-bottom: 1px solid #F0F0F0;
    padding: 10px 0 10opx 0;
    display: flex;
    justify-content: space-between;
  }
</style>
